import { useState } from 'react';
import { Link } from 'react-router-dom';
import { Pagination } from '../components/Pagination';
import { FilterTabs } from '../components/FilterTabs';
import { usePageTitle } from '../hooks/usePageTitle';
import { ImageWithLoader } from '../components/ImageWithLoader';

export function Laundry() {
  usePageTitle('Laundry Appliances');
  
  const [currentPage, setCurrentPage] = useState(1);
  const [activeCategory, setActiveCategory] = useState('All Products');
  const categories = ['All Products', 'Washing Machines', 'Dryers', 'Washer-Dryers', 'Steam Closets'];
  const allProducts = [{
    id: 'laundry-1',
    name: 'Miele TwinDos Washing Machine',
    image: 'https://images.unsplash.com/photo-1610557892470-55d9e80c0bce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80',
    category: 'Washing Machines',
    description: 'Precision dosing system and intelligent fabric detection for perfect cleaning.',
    price: '$1,799'
  }, {
    id: 'laundry-2',
    name: 'Samsung Smart Washer-Dryer Combo',
    image: 'https://images.unsplash.com/photo-1604335399105-a0c585fd81a1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    category: 'Washer-Dryers',
    description: 'Space-saving design with AI fabric detection and remote monitoring capabilities.',
    price: '$1,499'
  }, {
    id: 'laundry-3',
    name: 'LG Styler Steam Closet',
    image: 'https://images.unsplash.com/photo-1584269155219-e82bed7b6392?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80',
    category: 'Steam Closets',
    description: 'Gentle steam refreshing for delicate garments that require special care.',
    price: '$1,299'
  }, {
    id: 'laundry-4',
    name: 'Electrolux Front Load Washer',
    image: 'https://images.unsplash.com/photo-1626806787461-102c1bfaaea1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80',
    category: 'Washing Machines',
    description: 'Advanced stain removal with adaptive dispenser and steam technology.',
    price: '$1,099'
  }, {
    id: 'laundry-5',
    name: 'Bosch Heat Pump Dryer',
    image: 'https://images.unsplash.com/photo-1604335399105-a0c585fd81a1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    category: 'Dryers',
    description: 'Energy-efficient drying with sensor technology and wrinkle protection.',
    price: '$1,399'
  }, {
    id: 'laundry-6',
    name: 'Samsung AirDresser',
    image: 'https://images.unsplash.com/photo-1584269155219-e82bed7b6392?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80',
    category: 'Steam Closets',
    description: 'Sanitizes and refreshes clothes with powerful jets of air and steam.',
    price: '$1,499'
  }, {
    id: 'laundry-7',
    name: 'Whirlpool Smart Top Load Washer',
    image: 'https://images.unsplash.com/photo-1626806787461-102c1bfaaea1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80',
    category: 'Washing Machines',
    description: 'Load & Go dispenser with voice control and smartphone notifications.',
    price: '$999'
  }, {
    id: 'laundry-8',
    name: 'LG TurboSteam Dryer',
    image: 'https://images.unsplash.com/photo-1604335399105-a0c585fd81a1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    category: 'Dryers',
    description: 'Reduces wrinkles and odors with steam technology and sensor drying.',
    price: '$1,099'
  }];
  // Filter products by category
  const filteredProducts = activeCategory === 'All Products' ? allProducts : allProducts.filter(product => product.category === activeCategory);
  // Pagination logic
  const productsPerPage = 6;
  const totalPages = Math.ceil(filteredProducts.length / productsPerPage);
  const currentProducts = filteredProducts.slice((currentPage - 1) * productsPerPage, currentPage * productsPerPage);
  const handlePageChange = (page: number) => {
    setCurrentPage(page);
    window.scrollTo(0, 0);
  };
  const handleCategoryChange = (category: string) => {
    setActiveCategory(category);
    setCurrentPage(1);
  };
  return <div className="w-full">
      {/* Hero section */}
      <div className="relative w-full h-80 bg-cover bg-center" style={{
      backgroundImage: 'url("https://images.unsplash.com/photo-1545173168-9f1947eebb7f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80")'
    }}>
        <div className="absolute inset-0 bg-black bg-opacity-40"></div>
        <div className="absolute inset-0 flex items-center">
          <div className="container mx-auto px-4">
            <h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
              Laundry Advanced
            </h1>
            <p className="text-xl text-white max-w-xl">
              Transform your laundry routine with smart appliances that deliver
              exceptional care for your garments.
            </p>
          </div>
        </div>
      </div>
      {/* Filter tabs */}
      <FilterTabs categories={categories} activeCategory={activeCategory} onCategoryChange={handleCategoryChange} />
      {/* Featured products */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold mb-8 text-center">
            Featured Laundry Appliances
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {currentProducts.map(product => <div key={product.id} className="bg-[#f8f9fa] rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow">
                <ImageWithLoader src={product.image} alt={product.name} className="w-full h-56 object-cover" />
                <div className="p-6">
                  <div className="mb-2">
                    <span className="bg-[#e9ecef] text-[#343a40] text-xs px-2 py-1 rounded">
                      {product.category}
                    </span>
                  </div>
                  <h3 className="font-bold text-xl mb-2">{product.name}</h3>
                  <p className="text-gray-600 mb-4">{product.description}</p>
                  <div className="flex justify-between items-center">
                    <span className="text-xl font-semibold">
                      {product.price}
                    </span>
                    <Link to={`/product/${product.id}`} className="bg-[#d4a373] hover:bg-[#c99b6e] text-white px-4 py-2 rounded-md transition-colors">
                      View Details
                    </Link>
                  </div>
                </div>
              </div>)}
          </div>
          {/* Pagination */}
          {totalPages > 1 && <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} />}
        </div>
      </section>
      {/* Laundry innovation */}
      <section className="py-16 bg-[#e9ecef]">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row items-center">
            <div className="md:w-1/2 mb-8 md:mb-0 md:pr-8">
              <h2 className="text-3xl font-bold mb-4">
                Laundry Innovation That Cares
              </h2>
              <p className="text-gray-600 mb-4">
                Our curated selection of premium laundry appliances combines
                cutting-edge technology with thoughtful design to provide
                exceptional care for all your garments.
              </p>
              <p className="text-gray-600 mb-4">
                From intelligent washing machines that automatically detect
                fabric types to energy-efficient dryers and steam closets that
                extend the life of your delicate items, we've evaluated the best
                options on the market.
              </p>
              <button className="bg-[#d4a373] hover:bg-[#c99b6e] text-white px-6 py-3 rounded-md font-medium transition-colors">
                Explore Buying Guide
              </button>
            </div>
            <div className="md:w-1/2">
              <ImageWithLoader src="https://images.unsplash.com/photo-1582735689369-4fe89db7114c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Modern laundry room" className="rounded-lg shadow-md" />
            </div>
          </div>
        </div>
      </section>
    </div>;
}